<template>
	<div>
		<header class="hd">
			<div class="w clearfix">
				<div class="hd-l fl">
					<ul class="clearfix">
						<li class="fl home">
							<img src="../../assets/home.svg" alt="" />
							<a href="#">京东首页</a>
						</li>
						<li class="fl address">
							<img src="../../assets/map-pin.svg" alt="" />
							<a href="#">广东</a>
						</li>
					</ul>
				</div>
				<div class="hd-r fr">
					<ul class="clearfix">
						<li class="fl parent-box" :class="{ hasChildren: item.hasChildren }" v-for="item in navList">
							<a href="#">
								{{ item.title }}
								<img v-if="item.hasChildren" src="../../assets/chevron-down.svg" alt="" />
							</a>
							<div class="children-box">
								<ul class="clearfix">
									<li class="fl" v-for="item in 10">
										<a class="children-box-a" href="#">企业购</a>
									</li>
								</ul>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</header>
		<div class="md-head clearfix w">
			<div class="logo fl">
				<img src="../../assets/md_logo_1.png" alt="" />
			</div>
			<div class="search-wraper fl">
				<div class="search-input clearfix">
					<input class="fl" type="text" />
					<span class="fl search-btn">搜索</span>
				</div>
				<ul class="clearfix">
					<li class="fl" v-for="item in 10"><a href="#">婴儿车</a></li>
				</ul>
			</div>
		</div>
		<div class="all-result w">
			<a href="#">全部结果</a>
			<img src="../../assets/chevron-right.svg" alt="" />
			<span>"京东 价格"</span>
		</div>
		<div class="sear_container w">
			<div class="brand clearfix">
				<div class="left fl">
					<strong>品牌：</strong>
				</div>
				<div class="center fl">
					<ul class="clearfix">
						<li v-for="item in 10" class="fl"><a href="#">Apple</a></li>
					</ul>
				</div>
				<div class="right fr">
					<ul class="clearfix">
						<li class="fl">
							<span>更多</span>
							<img src="../../assets/chevron-right.svg" alt="" />
						</li>
						<li class="fl">
							<span>多选</span>
							<img src="../../assets/chevron-right.svg" alt="" />
						</li>
					</ul>
				</div>
			</div>
			<div class="brand clearfix">
				<div class="left fl">
					<strong>品牌：</strong>
				</div>
				<div class="center fl">
					<ul class="clearfix">
						<li v-for="item in 10" class="fl"><a href="#">Apple</a></li>
					</ul>
				</div>
				<div class="right fr">
					<ul class="clearfix">
						<li class="fl">
							<span>更多</span>
							<img src="../../assets/chevron-right.svg" alt="" />
						</li>
						<li class="fl">
							<span>多选</span>
							<img src="../../assets/chevron-right.svg" alt="" />
						</li>
					</ul>
				</div>
			</div>
			<div class="brand clearfix">
				<div class="left fl">
					<strong>品牌：</strong>
				</div>
				<div class="center fl">
					<ul class="clearfix">
						<li v-for="item in 10" class="fl"><a href="#">Apple</a></li>
					</ul>
				</div>
				<div class="right fr">
					<ul class="clearfix">
						<li class="fl">
							<span>更多</span>
							<img src="../../assets/chevron-right.svg" alt="" />
						</li>
						<li class="fl">
							<span>多选</span>
							<img src="../../assets/chevron-right.svg" alt="" />
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			navList: [
				{ title: "你好，请登录", hasChildren: false },
				{ title: "我的订单", hasChildren: false },
				{ title: "我的京东", hasChildren: true },
				{ title: "企业采购", hasChildren: true },
				{ title: "客户服务", hasChildren: true },
				{ title: "网站导航", hasChildren: true },
				{ title: "手机京东", hasChildren: false },
				{ title: "网站无障碍", hasChildren: false }
			]
		};
	}
};
</script>
<style scoped>
* {
	box-sizing: border-box;
}
.w {
	width: 1390px;
	margin: 0 auto;
}
ul,
li {
	list-style: none;
}
a {
	text-decoration: none;
}
.clearfix::after {
	content: "";
	display: block;
	clear: both;
}
.fl {
	float: left;
}
.fr {
	float: right;
}
.hd {
	height: 30px;
	line-height: 30px;
	background-color: #ccc;
}
.hd-l ul li {
	height: 30px;
}
.home {
	margin-right: 5px;
}
.home img,
.address img {
	height: 16px;
	vertical-align: middle;
}
.home a,
.address a {
	font-size: 12px;
	padding: 0 5px;
	vertical-align: middle;
}
.hd-r {
	font-size: 12px;
}
.hd-r ul li.parent-box a {
	border-right: 1px solid #999;
	padding: 0 10px;
	color: #999;
}
.hd-r ul li.parent-box {
	position: relative;
}
.hd-r ul li.parent-box:hover a {
	color: red;
}
.hd-r ul li.parent-box:hover {
	background-color: #fff;
}
.hd-r ul li.parent-box:last-child a {
	border-right: 0;
}
.hd-r ul li.parent-box a img {
	height: 12px;
	vertical-align: middle;
}

.hd-r ul li.parent-box .children-box {
	z-index: 999;
	display: none;
	position: absolute;
	left: 1px;
	top: 30px;
	width: 140px;
	height: 200px;
	padding: 10px;
	background-color: #eee;
	transition: all 0.5s;
}
.hd-r .children-box ul li a {
	border-right: 0 !important;
}
.children-box-a {
	color: #999 !important;
}
.children-box-a:hover {
	color: red !important;
}
.hd-r ul li.hasChildren:hover .children-box {
	display: block;
}
.md-head {
	margin-top: 30px;
}
.search-wraper {
	margin-left: 40px;
}
.search-input {
	width: 548px;
	height: 45px;
	border: 3px solid red;
}
.search-input input {
	padding-left: 10px;
	width: 452px;
	border: 0;
	outline: none;
	height: 100%;
}
.search-btn {
	line-height: 39px;
	display: block;
	width: 90px;
	background-color: red;
	font-size: 18px;
	text-align: center;
	height: 39px;
}
.search-wraper ul {
	margin-top: 6px;
}
.search-wraper ul li {
	margin-right: 10px;
}
.search-wraper ul li a {
	font-size: 12px;
	color: #999;
}
.all-result img {
	height: 12px;
	vertical-align: middle;
}
.all-result a {
	font-size: 12px;
}
.all-result span {
	font-size: 12px;
}
.sear_container {
	margin-top: 5px;
}
.sear_container .brand {
	font-size: 12px;
	height: auto;
	line-height: 34px;
	/* border-top: 1px solid #999; */
	border-bottom: 1px solid red;
}
.sear_container .brand:first-child {
	border-top: 1px solid #999;
}
.sear_container .brand .left {
	padding-left: 5px;
	width: 100px;
	height: 34px;
	background-color: #beabab;
	/* border-bottom: 1px solid #999; */
}
.sear_container .brand .center ul li {
	margin-right: 50px;
}
.sear_container .brand .center ul {
	margin: 0 13px;
}
.sear_container .brand .right ul {
	margin-right: 10px;
}
.sear_container .brand .right ul li {
	height: 25px;
	border: 1px solid #999;
	margin: 4px 0;
	margin-left: 10px;
	line-height: 25px;
	padding: 0 4px;
}
.sear_container .brand .right ul li img {
	height: 12px;
	vertical-align: middle;
}
</style>
